<template>
  <div class="basic-info">
    <!-- 标题 -->
    <div class="title-wrapper">
      <div class="title-mark"></div>
      <span class="title-text">基本信息</span>
    </div>

    <!-- 横线 -->
    <div class="divider">
      <div class="divider-highlight"></div>
    </div>

    <!-- 主体部分 -->
    <div class="content-wrapper">
      <div class="content-inner">
        <!-- 左侧 -->
        <div class="left-column">
          <div class="info-row">
            <div class="info-label">捐赠者编码</div>
            <div class="info-value">{{ donorInfoForm.basicId }}</div>
          </div>

          <div class="info-row">
            <div class="info-label">出生日期</div>
            <div class="info-value">
              {{ donorInfoForm.dateOfBirth?.slice(0, 10) }}
            </div>
          </div>

          <div class="info-row">
            <div class="info-label">身高</div>
            <div class="info-value">{{ donorInfoForm.height }} cm</div>
          </div>

          <div class="info-row">
            <div class="info-label">体重</div>
            <div class="info-value">{{ donorInfoForm.weight }} kg</div>
          </div>

          <div class="info-row">
            <div class="info-label">血型</div>
            <div class="info-value">{{ donorInfoForm.bloodType }}</div>
          </div>

          <div class="info-row">
            <div class="info-label">眼睛颜色</div>
            <div class="info-value">{{ donorInfoForm.eyeColor }}</div>
          </div>

          <div class="info-row">
            <div class="info-label">头发颜色</div>
            <div class="info-value">{{ donorInfoForm.hairColor }}</div>
          </div>

          <div class="info-row">
            <div class="info-label">皮肤颜色</div>
            <div class="info-value">{{ donorInfoForm.skinColor }}</div>
          </div>
        </div>

        <!-- 右侧 -->
        <div class="right-column">
          <div class="info-row">
            <div class="info-label">婚姻状况</div>
            <div class="info-value">{{ donorInfoForm.maritalStatus }}</div>
          </div>

          <div class="info-row">
            <div class="info-label">种族</div>
            <div class="info-value">{{ donorInfoForm.race }}</div>
          </div>

          <div class="info-row">
            <div class="info-label">教育程度</div>
            <div class="info-value">{{ donorInfoForm.education }}</div>
          </div>

          <div class="info-row">
            <div class="info-label">学校及专业</div>
            <div class="info-value">{{ donorInfoForm.schoolNameMajor }}</div>
          </div>

          <div class="info-row">
            <div class="info-label">平均绩点</div>
            <div class="info-value">{{ donorInfoForm.gpa }}</div>
          </div>

          <div class="info-row">
            <div class="info-label">吸烟</div>
            <div class="info-value">
              {{ donorInfoForm.isSmoker === "1" ? "是" : "否" }}
            </div>
          </div>

          <div class="info-row">
            <div class="info-label">个性描述</div>
            <div class="info-value">{{ donorInfoForm.personality }}</div>
          </div>

          <div class="info-row">
            <div class="info-label">最佳技能</div>
            <div class="info-value">{{ donorInfoForm.otherExpertise }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { defineProps } from "vue";

// Props 定义
const props = defineProps({
  userId: {
    type: String,
    required: true,
    default: "",
  },
  donorInfoForm: {
    type: Object,
    required: true,
    default: () => ({}),
  },
});

const donorId = ref();
const userId = ref("");
const loading = ref(true);

onMounted(() => {
  userId.value = props.userId;
});
</script>

<style scoped lang="scss">
/* ===== 只给「没有写过字体或颜色」的文字补微软雅黑 + #333 ===== */
.basic-info {
  font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
  color: #333;
}
/* =========================================================== */

/* 主容器 */
.basic-info {
  /* 标题区域 */
  .title-wrapper {
    display: flex;
    align-items: center;

    /* 左侧竖条 */
    .title-mark {
      width: 6px;
      height: 26px;
      background-color: #2b5cab;
    }

    /* 标题文字 —— 已有颜色，不受上面影响 */
    .title-text {
      margin-left: 10px;
      font-size: 24px;
      font-weight: bold;
      color: #2b5cab;
    }
  }

  /* 横线容器 */
  .divider {
    height: 1px;
    background-color: #2b5cab;
    margin-top: 18px;
    position: relative;

    /* 高亮渐变条 */
    .divider-highlight {
      width: 460px;
      height: 5px;
      background: linear-gradient(to right, #2b5cab, #cedbf0);
      border-radius: 2px;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  /* 主体内容容器 */
  .content-wrapper {
    border: 1px solid #a2c4e8;
    border-radius: 8px;
    margin-top: 23px;
    padding: 20px 20px;

    /* 内部内容布局 */
    .content-inner {
      display: flex;
      justify-content: space-between;
      padding: 0 10px;
    }

    /* 左侧列 */
    .left-column {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 48%;
    }

    /* 右侧列 */
    .right-column {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 500px;
    }

    /* 信息行 */
    .info-row {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #e5e7eb;
      padding: 8px 0;

      /* 左侧标签 —— 未写过 color，继承 #333 */
      .info-label {
        width: 33.33%;
        font-weight: 500;
      }

      /* 右侧值 —— 已有颜色，保持 #4b5563 */
      .info-value {
        width: 66.66%;
        text-align: right;
        color: #4b5563;
      }
    }
  }
}

/* 保留原有样式 */
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
